<template>
	<view>
		<view class="list-container">
			<!-- 复查时间 -->
			<view class="item">
				<view class="top-label" @click="retract()">
					<view>复查时间</view>
					<view class="text-right">{{formData.reviewDate}}</view>
					<view v-if="formData.show"><uv-icon name="arrow-down" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
				</view>

                <view v-if="formData.show">
                    <!-- 复查照片 -->
                    <view class="item-child" style="margin-bottom:10rpx;">
                        <view class="top-label">
                            <view class="requireStarBottom">复查照片</view>
                            <view class="zi-label">{{ imageLength }} / 30</view>
                        </view>
                        <view class="info">
                            <view class="file-all">
                                <fileUpload tableName="sup_law_item" type="review" :watermarkFlag="true"
                                            :maxCount="30" multiple :deletable="true" @imageListArray="imgList" @delImageListArray="delImgList"
                                            @initImage="initImage" width="72" height="72" :parentImageList="localImgList">
                                </fileUpload>
                            </view>
                        </view>
                    </view>
                    <view class="item-child">
                        <view class="top-label">
                            <view class="requireStarBottom">复查结果</view>
                            <view class="rectification">
                                <view v-for="(item, index) in rectificationList" :key="index" @click="selectRectification(item.value)">
                                    <view :class="formData.lawFlag == item.value ? 'rectification-item-action' : 'rectification-item'">
                                        {{ item.name }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="formData.lawFlag == 0" class="item-child">
                        <view class="info">
                            <view class="">
                                <view style="display: flex; flex-direction: column; margin-bottom: 15rpx">
                                    <view class="zheng-gai-zi">复查意见</view>
                                    <view class="zi-bottom textAreaBox">
                                        <uv-textarea v-model="formData.reason" maxlength="200" count placeholder="请输入内容"></uv-textarea>
                                        <view class="fontCount" @click="showSpeech">
                                            <view>
                                                <image :src="imgMinioPath + '/law/yuyin.png'"></image>
                                            </view>
                                            <view></view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
			<view class="check-bottom-box" @click.stop>
				<button class="sure-button" @click.stop="submit()">确认</button>
			</view>
      <uv-popup ref="refSpeech" mode="bottom" round="8"  @change="change">
        <speech-recognition @getSpeeckInfo="getSpeeckInfo" v-if="refSpeechShow"></speech-recognition>
      </uv-popup>
		</view>
	</view>
</template>

<script setup>
import {ref, reactive, getCurrentInstance, defineProps} from 'vue';
import lawItemAPI from "@/api/law/lawItem/lawItem";
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);
const {proxy} = getCurrentInstance();
const entryType = ref(uni.getStorageSync('entryType'));
const userInfo = ref(uni.getStorageSync('userInfo'));
const props = defineProps({
  id: {
    type: String,
    default: "",
    required: true
  },
});
// 图片长度
const imageLength = ref(0);
const localImgList = reactive();

let formData = reactive({
	  show: true,
      lawId:props.id,
      lawType:"40",
      lawFlag:1,
      reason:"",
      fileList:[],
      userId: userInfo.value.userId,
      userName: userInfo.value.user.nickName,
      reviewDate: proxy.dayjs().format('YYYY-MM-DD HH:mm:ss'),
      reviewName: userInfo.value.userName,
});
// 复查结果选中
const rectificationList = ref([
	{ name: '通过', value: 1 },
	{ name: '不通过', value: 0 }
]);
function selectRectification(value) {
  if(formData.lawFlag==value){
    return;
  }
  formData.lawFlag = value;
  formData.reason="";
}
function retract() {
	formData.show = !formData.show;
}
let initImage = (imageList) => {
  imageLength.value = imageList.length;
}

/** 上传图片 **/
let imgList = (addList, imageList)=>{
  formData.fileList = addList;
  imageLength.value = imageList.length;
}

/** 删除图片 **/
let delImgList = (delFileIds, imageList) => {
  formData.delFileIds = delFileIds;
  imageLength.value = imageList.length;
};

//语音输入
const refSpeech = ref();
const showSpeech = () => {
	refSpeech.value.open();
};

function getSpeeckInfo(val) {
  refSpeech.value.close();
  formData.reason += val;
}
const refSpeechShow = ref(false);
const change= (e) => {
  refSpeechShow.value=e.show
}

async function submit() {

  if (imageLength.value===0) {
    uni.showToast({
      icon: 'none',
      title: '请上传复查照片'
    });
    return;
  }

  if ( formData.lawFlag== 0 && !formData.reason) {
    uni.showToast({
      icon: 'none',
      title: '请输入复查意见'
    });
    return;
  }

  let res = await proxy.http.asyncPost(lawItemAPI.lawItemAdd, formData);
  if (res.code === 0) {
    await uni.showToast({icon: 'success', title: '审核成功', duration: 2000});
    setTimeout(() => {
        goBack();
    }, 1000)
  } else {
    await uni.showToast({title: res.msg, icon: 'none'});
  }

    /** 返回上一页 */
    let goBack = async () => {
        uni.$emit("refresh", {});
        await uni.navigateBack();
    };
}
let setLocal = () =>{
	uni.setStorageSync("fcFormData",formData)
}
defineExpose({
	setLocal,
})
let showStorageInfo = () => {
	let storageInfo = uni.getStorageSync("fcFormData");
	if(storageInfo){
		uni.removeStorageSync("fcFormData");
		formData.lawFlag = storageInfo.lawFlag;
		formData.reason = storageInfo.reason;
		formData.delFileIds = storageInfo.delFileIds;
		formData.fileList = storageInfo.fileList;
	}
}
showStorageInfo()
</script>

<style lang="scss" scoped>
@import "@/static/css/dailycheck/viewIndex.scss";

::v-deep .textAreaBox {
	position: relative;
}

.fontCount {
	position: absolute;
	bottom: 2px;
	right: 130rpx;
	color: #9e9e9e;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	image {
		height: 50rpx;
		width: 50rpx;
	}
}

::v-deep .requireStarBottom {
	width: 23%;
	position: relative;
}

::v-deep .requireStarBottom:after {
	position: absolute;
	right: 0;
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}

::v-deep.uv-textarea__field {
	text-align: left !important;
}

.rectification {
	display: flex;
	grid-gap: 20rpx;

	.rectification-item-action {
		width: 110rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: rgba(51, 117, 246, 0.698);
		border-radius: 2px;
		font-size: 24rpx;
	}

	.rectification-item {
		background: #cccccc;
		@extend .rectification-item-action;
	}
}

.popup-title-1 {
	height: 112rpx;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #e7e7e7;
	line-height: 112rpx;
	background: #ffffff;
}

.up-popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 360rpx;
	background: #f5f5f5;

	.select-one {
		height: 110rpx;
		background: #ffffff;
		margin-top: -140rpx;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
		line-height: 110rpx;
	}

	.select-two {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
	}

	.bottom-box {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
	}
}

.check-all {
	display: flex;
	width: 110%;
	align-items: center;
}

.check-all-ri-label {
	color: #9e9e9e;
	font-size: 24rpx;
	width: 69%;
}

.zi-label {
	color: #9e9e9e;
  font-size: var(--uni-font-size-14);
}

.file-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 4px;
	margin-left: 10rpx;
}

.file-all {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 10rpx;
}

.delet-img {
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 0;
	top: 0;
}
.sure-button-box{
  width: 100vw;
}
.zheng-gai-zi{
  margin-left: 0rpx;
  margin-top:20rpx;
}
.list-container .item {
    padding:10rpx 20rpx;
}
</style>
